<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        .outer {
            position: relative;
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }

        .target {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }

        .target1 {
            top: 300px;
            left: 100px;
        }

        .target2 {
            top: 100px;
            left: 380px;
        }

        .target3 {
            top: 300px;
            left: 680px;
        }

        .target4 {
            top: 500px;
            left: 30%;
        }

        .target5 {
            top: 500px;
            right: 30%;
        }

        .target .point {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 10px;
            height: 10px;
            margin: auto;
            -webkit-border-radius: 50%;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 50%;
            -moz-background-clip: padding;
            border-radius: 50%;
            background-clip: padding-box;
            background: transparent;
        }

        .target .point-dot {
            background-color: #6AD7E9;

        }

        .target1 .point-dot {
            background: green;
            border: 1px solid green;
        }

        .target2 .point-dot {
            background: #208adb;
            border: 1px solid #208adb;
        }

        .target3 .point-dot {
            background: #00ff00;
            border: 1px solid #00ff00;
        }

        .target4 .point-dot {
            background: yellowgreen;
            border: 1px solid yellowgreen;
        }

        .target5 .point-dot {
            background: #c01110;
            border: 1px solid #c01110;
        }

        .target1 .point-10:after, .target1 .point-40:after, .target1 .point-80:after {
            border: 4px solid green;
        }

        .target2 .point-10:after, .target2 .point-40:after, .target2 .point-80:after {
            border: 2px solid #208adb;
        }

        .target3 .point-10:after, .target3 .point-40:after, .target3 .point-80:after {
            border: 2px solid #00ff00;
        }

        .target4 .point-10:after, .target4 .point-40:after, .target4 .point-80:after {
            border: 2px solid yellowgreen;
        }

        .target5 .point-10:after, .target5 .point-40:after, .target5 .point-80:after {
            border: 2px solid #c01110;
        }

        .target .point-10 {
            width: 100%;
            height: 100%;
        }

        .target .point-10:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            opacity: 0;
            -webkit-animation: ripple 4500ms ease-out 225ms infinite;
            -moz-animation: ripple 4500ms ease-out 225ms infinite;
            -o-animation: ripple 4500ms ease-out 225ms infinite;
            animation: ripple 4500ms ease-out 225ms infinite;
        }

        .target .point-40 {
            width: 100%;
            height: 100%;
        }

        .target .point-40:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            opacity: 0;
            -webkit-animation: ripple 4500ms ease-out 900ms infinite;
            -moz-animation: ripple 4500ms ease-out 900ms infinite;
            -o-animation: ripple 4500ms ease-out 900ms infinite;
            animation: ripple 4500ms ease-out 900ms infinite;
        }

        .target .point-80 {
            width: 100%;
            height: 100%;
        }

        .target .point-80:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            opacity: 0;
            -webkit-animation: ripple 4500ms ease-out 1800ms infinite;
            -moz-animation: ripple 4500ms ease-out 1800ms infinite;
            -o-animation: ripple 4500ms ease-out 1800ms infinite;
            animation: ripple 4500ms ease-out 1800ms infinite;
        }

        @-webkit-keyframes ripple {
            0% {
                opacity: 0;
                -webkit-transform: scale(0.1, 0.1);
            }
            5% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: scale(1)
            }
        }

        @-moz-keyframes ripple {
            0% {
                opacity: 0;
                -moz-transform: scale(0.1, 0.1);
            }
            5% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                -moz-transform: scale(1)
            }
        }

        @-o-keyframes ripple {
            0% {
                opacity: 0;
                -o-transform: scale(0.1, 0.1);
            }
            5% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                -o-transform: scale(1)
            }
        }

        @keyframes ripple {
            0% {
                opacity: 0;
                -webkit-transform: scale(0.1);
                -moz-transform: scale(0.1);
                -ms-transform: scale(0.1);
                transform: scale(0.1);
            }
            5% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
            }
        }

        .target .line {
            position: absolute;
            width: 60px;
            height: 0;
            border-top: 1px solid #fff;
            box-shadow: 0 0 5px #000;
            top: 50%;
            margin-top: -0.5px;
            left: 50%;
            opacity: 0;
            filter: alpha(opacity=0);
        }

        .target1 .line {
            left: 50%;
            top: 30px;
            transform: rotate(0deg);
        }

        .target2 .line {
            left: 10px;
            top: 60px;
            transform: rotate(74deg);
        }

        .target3 .line {
            left: -30px;
            top: 4px;
            transform: rotate(45deg);
        }

        .target4 .line {
            left: 10px;
            top: 0px;
            transform: rotate(110deg);
        }

        .target5 .line {
            left: -27px;
            top: 16px;
            transform: rotate(28deg);
        }

        .target1 .line {
            animation: f1 1s linear 0s infinite alternate;
        }

        .target3 .line {
            animation: f3 1s linear 0s infinite alternate;
        }

        @keyframes f1 {
            0% {
                opacity: 0;
                transform: translateX(0px);
            }
            50% {
                transform: translateX(244px);
                opacity: 1;
            }
            100% {
                transform: translateX(498px);
                opacity: 0;
            }
        }

        @keyframes f3 {
            0% {
                opacity: 0;
                filter: alpha(opacity=0);
                transform: rotate(32deg) translate(0px);
            }
            50% {
                transform: rotate(32deg) translate(-140px);
                opacity: 1;
                filter: alpha(opacity=100);
            }
            100% {
                transform: rotate(32deg) translate(-280px);
                opacity: 0;
                filter: alpha(opacity=0);
            }
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="target target1">
        <div class="point point-dot"></div>
        <div class="point point-10"></div>
        <div class="point point-40"></div>
        <div class="line"></div>
    </div>
    <div class="target target2">
        <div class="point point-dot"></div>
        <div class="point point-10"></div>
        <div class="point point-40"></div>
        <div class="line"></div>
    </div>
    <div class="target target3">
        <div class="point point-dot"></div>
        <div class="point point-10"></div>
        <div class="point point-40"></div>
        <div class="line"></div>
    </div>
    <div class="target target4">
        <div class="point point-dot"></div>
        <div class="point point-10"></div>
        <div class="point point-40"></div>
        <div class="line"></div>
    </div>
    <div class="target target5">
        <div class="point point-dot"></div>
        <div class="point point-10"></div>
        <div class="point point-40"></div>
        <div class="line"></div>
    </div>
</div>

<script>
    /* function angle(x01,y01,x02,y02){//计算角度
         var diff_x = x02 - x01,
                 diff_y = y02 - y01;
         //返回角度,不是弧度
         var t=360*Math.atan(diff_y/diff_x)/(2*Math.PI);
         console.log(t);
     }
     function distance(x01,y01,x02,y02) {//计算两点之间直线距离
         var x1 = eval(x01);
         var y1 = eval(y01);
         var x2 = eval(x02);
         var y2 = eval(y02);
         var xdiff = x2 - x1;
         var ydiff = y2 - y1;
         var distance = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
         console.log(distance);
     }
     angle(100,300,380,100);
     distance(100,300,380,100)*/
    function getNum(x01, y01, x02, y02) {//计算角度
        var x1 = eval(x01),
            y1 = eval(y01),
            x2 = eval(x02),
            y2 = eval(y02),
            xdiff = x2 - x1,
            ydiff = y2 - y1;
        //返回角度,不是弧度
        var t = 360 * Math.atan(ydiff / xdiff) / (2 * Math.PI);
        console.log(t);
        var distance = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
        console.log(distance);
    }

    getNum(100, 300, 380, 100);
    getNum(300, 680, 100, 380);
</script>
</body>
</html>

